/*
* @Author: zhanghang
* @Date:   2018-06-20 16:29:31
* @Last Modified by:   zhanghang
* @Last Modified time: 2018-06-20 16:52:56
*/
import Vue from 'vue'

new Vue({
  el: '#root',
  template: `<div>
              {{name}}
              {{getName()}}
              <p>fullname{{fullName}}</p>
              <p><input type="text" v-model="number" /></p>
              <p>firtname<input type="text" v-model="firstName" /></p>
              <p>lastname<input type="text" v-model="lastName" /></p>
              <p>name<input type="text" v-model="name" /></p>
              <p>obj.a<input type="text" v-model="obj.a" /></p>
            </div>`,
  data: {
    firstName: 'Jocky',
    lastName: 'Lou',
    number: 0,
    fullName: '',
    obj: {
      a: ''
    }
  },
  computed: {
    // name () {
    //   console.log('new name')
    //   return `${this.firstName} ${this.lastName}`
    // }
    name: {
      get () {
        console.log('new name')
        return `${this.firstName} ${this.lastName}`
      },
      set (name) {
        const names = name.split(' ')
        this.firtName = names[0]
        this.lastName = names[1]
      }
    }
  },
  watch: {
    // firstName (newName, oldName) {
    //   this.fullName = newName + '' + this.lastName
    // }
    firstName: {
      handler (newName, oldName) {
        this.fullName = newName + '' + this.lastName
      },
      immediate: true,
      deep: true
    },
    // obj: {
    //   handler (newValue, oldValue) {
    //     console.log('obj', newValue)
    //   },
    //   immediate: true,
    //   deep: true
    // }
    'obj.a': {
      handler (newValue, oldValue) {
        console.log('obj', newValue)
      },
      immediate: true
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})
